<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>遮罩效果demo</title>
        <link rel="icon" type="image/x-icon" href="picture/图标logo.ico">
        <style>
            *{
    margin: 0;
    padding: 0;
    bottom: 0;
}
.box{
    position: relative;
    width: 1000px;
    height: 590px;
    margin: 120px auto;
}
.box a:hover::before{
    display: block;
}
.box img{
    width: 100%;
    height: 100%;
}
/* 添加伪元素 */
.box a::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.4) url(image/暂停符.png) no-repeat center;
    display: none;
}
        </style>
    </head>

    <body>
        <div class="box">
            <a href="http://materials.windfish.cn/jxy1-video.mp4" target="_blank">
                <img src="picture/album1.jpg" alt="">
            </a>
    </div>
    
    </body>

<ml>